<template>
  <div class="my_wrapper">
    <div class="yingxin_manage_content" style="padding: 20px; background: #fff">
      <div style="background: #fff">
        <el-tabs>
          <el-tab-pane v-if ='userInfo.roleid!=1' label="自定义类型">
            <div class="search_wrap" style="margin-bottom: 20px">
              <el-button @click="addHandle" type="primary">
                <i class="el-icon-circle-plus"></i> 新增</el-button
              >
            </div>
            <template>
              <el-table
                :data="tableDataZiDing"
                row-key="id"
                border
                style="width: 100%"
                stripe
                class="my_table1"
              >
                <el-table-column fixed type="index" label="序号" width="50">
                </el-table-column>
                <el-table-column prop="content" label="类别"> </el-table-column>
                <!--<el-table-column label="自定义/系统自带">
								<template slot-scope="scope">
									<span v-if="scope.row.issys==0" type="success">自定义</span>
									<span v-if="scope.row.issys==1">系统自带</span>
								</template>
							</el-table-column>-->
                <el-table-column label="操作" width="200">
                  <template slot-scope="scope">
                    <el-button
                      @click="editHandle(scope.row)"
                      type="primary"
                      size="small"
                      ><i class="el-icon-edit"></i> </el-button
                    >
                    <el-button
                      @click="deleteHandle(scope.row)"
                      type="danger"
                      size="small"
                      ><i class="el-icon-delete"></i> </el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-tab-pane>
          <el-tab-pane label="默认类型">
            <div class="search_wrap" v-if="userInfo.roleid == 1" style="margin-bottom: 20px">
              <el-button @click="addHandle" type="primary"><i class="el-icon-circle-plus"></i> 新增</el-button>
            </div>
            <template>
              <el-table
                :data="tableDataXiTong"
                row-key="id"
                border
                style="width: 100%"
                stripe
                class="my_table"
              >
                <el-table-column fixed type="index" label="序号" width="50">
                </el-table-column>
                <el-table-column prop="content" label="类别"> </el-table-column>
                <!--<el-table-column label="自定义/系统自带">
								<template slot-scope="scope">
									<span v-if="scope.row.issys==0" type="success">自定义</span>
									<span v-if="scope.row.issys==1">系统自带</span>
								</template>
							</el-table-column>-->
                <el-table-column                  
                  label="操作"
                  width="200"
                >
                  <template slot-scope="scope" v-if="userInfo.roleid == 1">
                    <el-button
                      @click="editHandle(scope.row)"
                      type="primary"
                      size="small"
                      ><i class="el-icon-edit"></i> </el-button
                    >
                    <el-button
                      @click="deleteHandle(scope.row)"
                      type="danger"
                      size="small"
                      ><i class="el-icon-delete"></i></el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-tab-pane>
        </el-tabs>

        <div class="ps">
          <span style="font-size: 12px">温馨提示：</span
          ><span class="ps_text" style="font-size: 12px">拖动调整应用端加载顺序</span>
        </div>
      </div>
      <!--增加-->
      <el-dialog
        title="新增请假类型"
        :visible.sync="dialogVisible"
        width="30%"
        center
      >
        <el-form
          :model="addData"
          :rules="rules"
          ref="ruleForm"
          label-position="right"
          label-width="100px"
        >
          <el-form-item label="类型：" prop="content">
            <el-input
              v-model="addData.content"
              placeholder="请输入类型"
              clearable
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <!--编辑-->
      <el-dialog
        title="编辑请假类型"
        :visible.sync="dialogVisible2"
        width="30%"
        center
      >
        <el-form
          :model="editData"
          :rules="rules"
          ref="ruleForm2"
          label-position="right"
          label-width="100px"
        >
          <el-form-item label="类型：" prop="content">
            <el-input
              v-model="editData.content"
              placeholder="请输入类型"
              clearable
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="submitForm2('ruleForm2')"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Sortable from "sortablejs";
export default {
  name: "settype",
  data() {
    return {
      dialogVisible: false,
      dialogVisible2: false, //编辑弹窗

      tableDataZiDing: [],
      tableDataXiTong: [],

      deptid: "1335768973752406016", //院系id
      addData: {
        content: "",
        type: 1, //1请假类别 2提交上级原因
        isSys: 0, //是否管理员添加 0自定义 1系统
      },
      editData: {
        id: "",
        content: "",
        type: 1, //1请假类别 2提交上级原因
        isSys: 0, //是否管理员添加 0自定义 1系统
      },
      rules: {
        content: [
          {
            required: true,
            message: "请输入类型",
            trigger: "blur",
          },
        ],
      },
      userInfo: {},
    };
  },
  mounted() {
    if(this.userInfo.roleid!=1)
    {
    //使每次都可以拖拽
    this.$nextTick(() => {
      setTimeout(() => {
        this.rowDrop();
      }, 100);
    });
    }
  },
  created() {
    let that = this;
    that.GetTableList();
    that.userInfo = JSON.parse(localStorage.getItem("my_user"));
  },
  methods: {
    //行拖拽
    rowDrop() {
      const tbody = document.querySelector(".my_table1 tbody");
      Sortable.create(tbody, {
        onEnd: ({ newIndex, oldIndex }) => {
          const currRow = this.tableDataZiDing.splice(oldIndex, 1)[0];
          this.tableDataZiDing.splice(newIndex, 0, currRow);
          let arr = this.tableDataZiDing;
          let param = [];
          for (let i = 0; i < arr.length; i++) {
            let obj = {
              id: arr[i].id,
              sort: i,
            };
            param.push(obj);
          }
          this.TableSort(param);
        },
      });
    },
    //获取人员列表
    GetTableList() {
      let that = this;
      that
        .postAxios(
          "/SysSetting/GetApproveDrpdList?type=1&deptid=" + that.deptid,
          null
        )
        .then((res) => {
          if (res.code == 0) {
            if (res.data.length > 0) {
              let arr = res.data;
              //issys 0: 自定义 1：系统
              let xitong = [];
              let ziding = [];
              for (let i = 0; i < arr.length; i++) {
                if (arr[i].issys == 1) {
                  xitong.push(arr[i]);
                } else {
                  ziding.push(arr[i]);
                }
              }
              that.tableDataZiDing = ziding;
              that.tableDataXiTong = xitong;              
            }
          }
        });
    },
    //排序
    TableSort(data) {
      let that = this;
      that.postAxios("/SysSetting/ReSort", data).then((res) => {
        if (res.code == 0) {
          that.$notify({
            title: "成功",
            message: "操作成功",
            type: "success",
          });
          //						that.GetTableList();
        } else {
          that.$notify.error({
            title: "错误",
            message: "操作失败",
          });
        }
      });
    },
    addHandle() {
      this.dialogVisible = true;
    },
    editHandle(row) {
      this.editData.content = row.content;
      this.editData.id = row.id;
      this.dialogVisible2 = true;
    },
    deleteHandle(row) {
      let that = this;
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          that
            .postAxios("/SysSetting/DelDropDowmItem?id=" + row.id, null)
            .then((res) => {
              if (res.code == 0) {
                that.$notify({
                  title: "成功",
                  message: "操作成功",
                  type: "success",
                });
                that.GetTableList();
              } else {
                that.$notify.error({
                  title: "错误",
                  message: "删除失败",
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    submitForm(formName) {
      let that = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          that
            .postAxios("/SysSetting/AddDropDowmItem", {
              deptid: that.deptid,
              ...that.addData,
            })
            .then((res) => {
              if (res.code == 0) {
                that.$notify({
                  title: "成功",
                  message: "操作成功",
                  type: "success",
                });
                that.GetTableList();
              } else {
                that.$notify.error({
                  title: "错误",
                  message: "操作失败",
                });
              }
              that.dialogVisible = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    submitForm2(formName) {
      let that = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          that
            .postAxios("/SysSetting/EidtDropDownItem", {
              deptid: that.deptid,
              ...that.editData,
            })
            .then((res) => {
              if (res.code == 0) {
                that.$notify({
                  title: "成功",
                  message: "操作成功",
                  type: "success",
                });
                that.GetTableList();
              } else {
                that.$notify.error({
                  title: "错误",
                  message: "操作失败",
                });
              }
              that.dialogVisible2 = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.my_wrapper {
  height: 100%;
  width: 100%;
}

.ps {
  margin: 10px;
  .ps_text {
    color: #f25e43;
  }
}
</style>